﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="fancybox.aspx.cs" Inherits="Web.Js相关应用.fancybox" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="js/jquery-1.9.0.min.js" type="text/javascript"></script>
    <link href="source/jquery.fancybox.css" rel="stylesheet" type="text/css" />
    <script src="source/jquery.fancybox.js" type="text/javascript"></script>
    <script src="source/jquery.fancybox.pack.js" type="text/javascript"></script>
    <link href="css/web.css" rel="stylesheet" type="text/css" />
    <script src="js/web.js" type="text/javascript"></script>
    <script type="text/javascript">
        function li(a) {
            if (a == 1) {
                document.getElementById("d1").style.display = "block";
                document.getElementById("d2").style.display = "none";
                document.getElementById("d3").style.display = "none";

            } else if (a == 2) {
                document.getElementById("d1").style.display = "none";
                document.getElementById("d2").style.display = "block";
                document.getElementById("d3").style.display = "none";
            } else if (a == 3) {
                document.getElementById("d1").style.display = "none";
                document.getElementById("d2").style.display = "none";
                document.getElementById("d3").style.display = "block";           
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h2>
            Examples</h2>
        <ul class="tabs">
            <li class="active" onclick="li(1);"><a href="javascript:;" class="tab-output">Single images</a></li>
            <li onclick="li(2);"><a href="javascript:;" class="tab-output">Image gallery</a></li>
            <li onclick="li(3);"><a href="javascript:;" class="tab-output">Various types</a></li>
        </ul>
        <div class="tab_container" id = "d1">
            <p>
                <a id="single1" href="http://farm4.staticflickr.com/3712/9032543579_1217e6566b_b.jpg"
                    title="Singapore from the air (Andrew Tan 2011)">
                    <img src="http://farm4.staticflickr.com/3712/9032543579_1217e6566b_m.jpg" alt="" /></a>
                <a id="single_2" href="http://farm4.staticflickr.com/3818/9036037912_83576fe5ab_b.jpg"
                    title="forest mood (halina-anna)">
                    <img src="http://farm4.staticflickr.com/3818/9036037912_83576fe5ab_m.jpg" alt="" />
                </a><a id="single_3" href="http://farm7.staticflickr.com/6115/6309906627_b5706c42e4_b.jpg"
                    title="311111 AUTUMN AT OSBORNE (THE ANCIENT MATELOT)">
                    <img src="http://farm7.staticflickr.com/6115/6309906627_b5706c42e4_m.jpg" alt="" />
                </a><a id="single_4" href="http://farm8.staticflickr.com/7412/8732133694_0c7e400022_b.jpg"
                    title="Lake Shirakawako (白川湖) [Explored] (Yukimomiji@もみぢ)">
                    <img src="http://farm8.staticflickr.com/7412/8732133694_0c7e400022_m.jpg" alt="" />
                </a>
            </p>
        </div>
        <div class="tab_container" style = "display:none;" id = "d2">
            <p>
                <a class="fancybox" rel="gallery1" href="http://farm6.staticflickr.com/5471/9036958611_fa1bb7f827_b.jpg"
                    title="Westfield Waterfalls - Middletown CT Lower (Graham_CS)">
                    <img src="http://farm6.staticflickr.com/5471/9036958611_fa1bb7f827_m.jpg" alt="" />
                </a><a class="fancybox" rel="gallery1" href="http://farm4.staticflickr.com/3824/9041440555_2175b32078_b.jpg"
                    title="Calm Before The Storm (One Shoe Photography Ltd.)">
                    <img src="http://farm4.staticflickr.com/3824/9041440555_2175b32078_m.jpg" alt="" />
                </a><a class="fancybox" rel="gallery1" href="http://farm3.staticflickr.com/2870/8985207189_01ea27882d_b.jpg"
                    title="Lambs Valley (JMImagesonline.com)">
                    <img src="http://farm3.staticflickr.com/2870/8985207189_01ea27882d_m.jpg" alt="" />
                </a><a class="fancybox" rel="gallery1" href="http://farm4.staticflickr.com/3677/8962691008_7f489395c9_b.jpg"
                    title="Grasmere Lake (Phil 'the link' Whittaker (gizto29))">
                    <img src="http://farm4.staticflickr.com/3677/8962691008_7f489395c9_m.jpg" alt="" />
                </a>
            </p>
        </div>
        <div class="tab_container" style = "display:none;" id = "d3">
            <p>
                <a class="fancybox-button" rel="fancybox-button" href="http://farm4.staticflickr.com/3787/9028269192_9b4ddf345d_b.jpg"
                    title="Tolpis barbata (mariluzpicado)">
                    <img src="http://farm4.staticflickr.com/3787/9028269192_9b4ddf345d_m.jpg" alt="" />
                </a><a class="fancybox-button" rel="fancybox-button" href="http://farm4.staticflickr.com/3745/8971419780_cb88b22947_b.jpg"
                    title="(dSavin)">
                    <img src="http://farm4.staticflickr.com/3745/8971419780_cb88b22947_m.jpg" alt="" />
                </a><a class="fancybox-button" rel="fancybox-button" href="http://farm9.staticflickr.com/8522/8478415115_152c6f5e55_b.jpg"
                    title="a ride in blue? (cembayir_photography)">
                    <img src="http://farm9.staticflickr.com/8522/8478415115_152c6f5e55_m.jpg" alt="" />
                </a><a class="fancybox-button" rel="fancybox-button" href="http://farm9.staticflickr.com/8366/8483546751_86494ae914_b.jpg"
                    title="reedit... (h_di)">
                    <img src="http://farm9.staticflickr.com/8366/8483546751_86494ae914_m.jpg" alt="" />
                </a>
            </p>
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#single1").fancybox({
                helpers: {
                    title: {
                        type: 'float'
                    }
                }
            });

            $("#single_2").fancybox({
                openEffect: 'elastic',
                closeEffect: 'elastic',
                helpers: {
                    title: {
                        type: 'inside'
                    }
                }
            });

            $("#single_3").fancybox({
                openEffect: 'elastic',
                closeEffect: 'elastic',
                helpers: {
                    title: {
                        type: 'inside'
                    }
                }
            });

            $("#single_4").fancybox({
                openEffect: 'elastic',
                closeEffect: 'elastic',
                helpers: {
                    title: {
                        type: 'inside'
                    }
                }
            });
        });
</script>
<script type="text/javascript">
    $(document).ready(function () {
        $(".fancybox").fancybox({
            openEffect: 'none',
            closeEffect: 'none'
        });
    });
</script>
<script type="text/javascript">
    $(document).ready(function () {
        $(".fancybox-button").fancybox({
            prevEffect: 'none',
            nextEffect: 'none',
            closeBtn: false,
            helpers: {
                title: {
                    type: 'inside'
                },
                buttons: {}
            }
        });
    });
</script>
    </form>
</body>
</html>
